<template>
  <view class="order-box">
    <u-sticky bgColor="#fff" offsetTop="0">
      <view class="tabs-box">
        <tabs
          itemStyle="padding-right: 64rpx;padding-left:0;height: 56rpx;font-size:32rpx;line-height: 48rpx;color: rgba(0,0,0,0.7);font-weight: 600;"
          lineWidth="0"
          :activeStyle="{
            color: 'rgba(0,0,0,0.9)',
            fontSize: '40rpx',
          }"
          :list="tabs"
          @change="changeType"
          :current="activeIndex"
        ></tabs>
      </view>
    </u-sticky>

    <view class="shop-box" v-if="list && list.length">
      <view class="shop-list" v-for="item in list" :key="item.orderId">
        <view class="shop-title-box">
          <view class="shop-left">
            <text class="number">订单号</text>
            <text class="shop-title">{{ item.orderNum }}</text>
          </view>
          <view
            class="order-status"
            :class="
              item.orderStatus == '1'
                ? 'await'
                : item.orderStatus == '2'
                ? 'paid'
                : 'cancel'
            "
          >
            {{ item.orderStatus | orderStatusFilter }}
          </view>
        </view>
        <view
          @click="
            toURL(
              `/page_my/order/detail`,
              { id: item.orderId },
              { isAuth: true }
            )
          "
        >
          <view
            class="item"
            v-for="it in item.detailPageVoList"
            :key="it.ticketName"
          >
            <view class="left">
              <img class="avatar" :src="img_api + it.goodPic" alt="" />
            </view>
            <view class="right">
              <view class="title u-line-1">{{ it.ticketName }}</view>
              <view class="shop-desc">{{ it.typeName }}</view>
              <view class="price-num-box">
                <view class="price"
                  >¥{{ Number(`${it.ticketMoney}e-2`).toFixed(2) }}</view
                >
                <view class="num"> x {{ it.ticketCount }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="price-list">
          <view class="price-count-box">
            <text class="price-text">运费</text>
            <text class="price-num"
              >¥{{ Number(`${item.postagePrice}e-2`).toFixed(2) }}</text
            >
          </view>
        </view>
        <view class="btn-box" v-if="item.orderStatus == '1'">
          <view class="order-btn cancel" @click="cancelOrder(item.orderId)">
            取消订单
          </view>
          <view class="order-btn pay" @click="getPayOrderInfo(item.orderId)">
            去支付 ¥{{ Number(`${item.orderTotalPrice}e-2`).toFixed(2) }}
          </view>
        </view>
        <view class="btn-box" v-if="item.orderStatus == '2'">
          <view class="order-btn contact" @click="callPhone(item)">
            联系客服
          </view>
        </view>
        <view class="btn-box" v-if="item.orderStatus == '5'">
          <!-- <view class="btn-box"> -->
          <view class="order-btn contact" @click="callPhone(item)">
            联系客服
          </view>
          <!-- <view class="order-btn view"> 查看快递单号</view> -->
          <!-- </view> -->
        </view>
        <view class="btn-box" v-if="item.orderStatus == '3'">
          <view class="order-btn contact" @click="delOrder(item.orderId)">
            删除订单
          </view>
        </view>
      </view>
    </view>
    <no-data
      class="booking-no-data"
      v-if="list && list.length === 0"
      text="暂无数据"
    ></no-data>
  </view>
</template>

<script>
import { ticketOrderStatus } from "@/utils/constant";
import noData from "@/components/noData.vue";
import {
  getlistOrderNew,
  getCancleOrder,
  getServerPhone,
  getDeleteOrder,
} from "@/config/api.js";
import tabs from "@/components/tabs/tabs.vue";
import { payTransactions } from "@/utils";

export default {
  components: {
    tabs,
    noData,
  },
  props: ["activeId"],
  data() {
    return {
      tabs: [
        {
          label: "",
          name: "全部",
        },
        {
          label: 1,
          name: "待付款",
        },
        {
          label: 2,
          name: "已付款",
        },
        {
          label: 5,
          name: "已发货",
        },
      ],
      list: null,
      current: 1,
      activeTab: "",
      total: 0,
      loadAll: false, // 已加载全部
      keyId: 0,
      activeIndex: 0,
    };
  },
  filters: {
    orderStatusFilter: function (value) {
      return ticketOrderStatus[value] || "null";
    },
  },
  onLoad() {
    this.activeIndex = Number(this.activeId) || 0;
    if (this.activeId) {
      this.activeTab = this.tabs[this.activeId].label;
    }
    this._getList();
  },
  onShow() {
    const { updateId, action } = this.urlParams;
    if (updateId && this.list.length) {
      const index = this.list.findIndex((item) => item.orderId == updateId);
      const item = this.list.find((item) => item.orderId == updateId);
      if (action === "删除") {
        this.list.splice(index, 1);
      }
      if (action === "取消") {
        item.orderStatus = "3";
        this.list.splice(index, 1, item);
      }
    }
  },
  methods: {
    changeType(e) {
      this.activeTab = e.label;
      uni.showLoading({
        title: "加载中",
      });
      this._getList();
    },
    _getList() {
      getlistOrderNew({
        orderStatus: this.activeTab,
        pageNum: this.current,
        orderType: 4,
        pageSize: 10,
      }).then((res) => {
        if (res.code === 200) {
          this.total = res.total;
          this.list =
            this.current === 1 ? res.rows : this.list.concat(res.rows);
          this.keyId++;
        } else {
          this.list = [];
        }
        uni.hideLoading();
      });
    },
    // 取消订单
    cancelOrder(id) {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.showLoading({
              title: "加载中",
            });
            getCancleOrder({ _id: id }).then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: "已取消",
                  icon: "none",
                });
                _this._getList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    //     删除订单
    delOrder(id) {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            getDeleteOrder({ _id: id }).then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: "已删除",
                  icon: "none",
                });
                _this._getList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 支付前获取订单详细
    getPayOrderInfo: function (orderId) {
      return payTransactions(orderId)
        .then(() => {
          this.toURL("/page_mall/result/index", { state: 1, id: orderId });
        })
        .catch(({ code }) => {
          this.toURL("/page_mall/result/index", { state: 0, id: orderId });
        });
    },
    // 拨打电话
    callPhone(item) {
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      getServerPhone({
        orderId: item.orderId,
        orderType: "4",
      }).then((res) => {
        if (res.code === 200) {
          this.toURL(res.msg, {}, { type: "phone" });
        } else {
          uni.showToast({ title: "暂无联系电话", icon: "none" });
        }
        this.isSubmitting = false;
      });
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.current = this.current + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss">
.order-box {
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.shop-box {
  padding: 0 0 100rpx;
  height: calc(100% - 100rpx);
}

.tabs-box {
  padding: 30rpx 32rpx 14rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

.shop-list {
  background: #ffffff;
  padding: 40rpx 32rpx;
  border-bottom: 1px solid #e5e5e5;
}

.shop-list:first-child {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.shop-title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10rpx;
}

.shop-left {
  display: flex;
}

.number {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  margin-right: 8rpx;
}

.shop-avatar {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.shop-title {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  line-height: 40rpx;
}

.order-status {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;

  &.await {
    color: #ff5000;
  }

  &.paid {
    color: rgba(0, 0, 0, 0.8);
  }

  &.delive {
    color: rgba(0, 0, 0, 0.8);
  }

  &.cancel {
    color: rgba(0, 0, 0, 0.5);
  }
}

.item {
  padding-top: 44rpx;
  display: flex;
  align-items: center;

  .left {
    width: 160rpx;
    height: 160rpx;
    margin-right: 24rpx;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }

  .right {
    flex: 1;

    .title {
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 20rpx;
    }

    .shop-desc {
      display: inline-block;
      background: #f7f9fa;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 4rpx 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #5f6f86;
      line-height: 32rpx;
      margin-bottom: 26rpx;
    }

    .price-num-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .price {
      font-size: 32rpx;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.9);
      font-family: D-DIN-Bold;
      line-height: 34rpx;
    }

    .num {
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.7);
      line-height: 44rpx;
    }
  }
}
.price-list {
  display: flex;
  justify-content: flex-end;

  .price-count-box {
    padding-top: 40rpx;
    padding-bottom: 32rpx;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 184rpx);

    .price-text {
      padding-right: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.7);
      line-height: 40rpx;
    }

    .price-num {
      font-size: 32rpx;
      font-weight: 700;
      font-family: D-DIN-Bold;
      color: rgba(0, 0, 0, 0.9);
      line-height: 34rpx;
    }
  }
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 46rpx;

  .order-btn {
    min-width: 170rpx;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    padding: 12rpx 44rpx;
    border: 2rpx solid #b7c1ca;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 44rpx;
    text-align: center;

    &.cancel {
      background: #ffffff;
      color: rgba(0, 0, 0, 0.9);
      margin-right: 24rpx;
    }

    &.pay {
      background: #ff5000;
      color: #ffffff;
      border: 0;
      padding: 12rpx 42rpx;
    }

    &.contact {
      position: relative;
      background: #ffffff;
      color: rgba(0, 0, 0, 0.9);
      padding: 12rpx 44rpx 12rpx 44rpx;
    }

    &.view {
      background: #ffffff;
      color: #777f8f;
    }

    &.delete {
      background: #ffffff;
      color: #777f8f;
    }
  }
}
</style>
